<template>
  <div class="animated fadeIn">
    <div class="card card-accent-primary">
      <b-row>
        <b-col cols="12">
          <Card>
            <p slot="title" style="height: 32px; margin-bottom: 0">
              <Button type="primary" @click="add" icon="plus-round">新增</Button>
            </p>
            <div>
              <i-table :loading="loading" border :columns="columns" :data="items"></i-table>
            </div>
            <div style="margin: 10px;overflow: hidden">
              <Page :total="total" :page-size="10" @on-change="onChange" show-total></Page>
            </div>
          </Card>
        </b-col>
      </b-row>
    </div>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '100px'}" @on-visible-change="doCancel">
      <div slot="header" style="color:#2d8cf0;">
        <Icon type="information-circled"></Icon>
        <span>{{dataId ? '编辑' : '新增'}}分组</span>
      </div>
      <Form ref="formValidate" :rules="ruleValidate" :model="formItems" :label-width="80">
        <formItem label="分组名称:" prop="title">
          <Input type="text" v-model="formItems.title"></Input>
        </formItem>
        <formItem label="分组规则:">
          <div class="rule-list">
            <Tree  ref="formTree" :data="menuAuth" show-checkbox multiple></Tree>
          </div>
        </formItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit('formValidate')" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'dashboard',
  data () {
    return {
      dataId: 0,
      menuAuth: [],
      modalSetting: {
        show: false,
        loading: false
      },
      ruleValidate: {
        title: [
          {required: true, message: '请填写分组名称', trigger: 'blur'}
        ]
      },
      formItems: {
        title: '',
        rules: []
      },
      key: '',
      columns: [
        {
          title: 'ID',
          key: 'ag_id',
          width: 50
        },
        {
          title: '用户组名称',
          key: 'ag_title',
          width: 200
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'table-min-width',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editItem(params.row.ag_id)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error'
                },
                on: {
                  click: () => {
                    this.deleteItem(params.row.ag_id)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      items: [],
      total: 0,
      page: 1,
      loading: true
    }
  },
  methods: {
    onChange (page) {
      this.page = page
      this.getList()
    },
    // 获取列表
    getList (key) {
      this.$get('/api/admin/authGroup', {
        params: {
          page: this.page,
          key: key
        }
      }).then((res) => {
        if (res) {
          this.total = res.data.total
          this.items = res.data.data
          this.loading = false
        }
      })
    },
    // 删除
    deleteItem (id) {
      this.$Modal.confirm({
        title: '提醒',
        content: '确认要删除吗?',
        onOk: () => {
          this.$_delete('/api/admin/authGroup/', id).then((res) => {
            if (res) {
              this.$Message.success({
                content: res.mess,
                onClose: () => {
                  this.getList()
                }
              })
            }
          })
        }
      })
    },
    editItem (id) {
      this.dataId = id
      this.$get('/api/admin/authGroup/' + id).then((res) => {
        if (res) {
          this.formItems.title = res.data.ag_title
        }
      })
      this.getMenuAuth()
      this.modalSetting.show = true
    },
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formItems.rules = []
          let ruleNodes = this.$refs['formTree'].getCheckedNodes()
          let ruleLength = ruleNodes.length
          if (ruleLength) {
            for (let i = 0; i <= ruleLength - 1; i++) {
              this.formItems.rules.push(ruleNodes[i]['ma_id'])
            }
          }
          if (this.dataId === 0) {
            this.$post('/api/admin/authGroup', this.formItems).then((res) => {
              if (res) {
                this.$Message.success({
                  content: res.mess,
                  onClose: () => {
                    this.cancel()
                  }
                })
              }
            })
          } else {
            this.$put('/api/admin/authGroup/', this.dataId, this.formItems).then((res) => {
              if (res) {
                this.$Message.success({
                  content: res.mess,
                  onClose: () => {
                    this.cancel()
                  }
                })
              }
            })
          }
        }
      })
    },
    add () {
      this.modalSetting.show = true
    },
    getMenuAuth () {
      this.$get('/api/admin/menuAuth?group=' + this.dataId).then((res) => {
        this.menuAuth = res.data
      })
    },
    doCancel (data) {
      if (!data) {
        this.dataId = 0
        this.$refs['formValidate'].resetFields()
        this.modalSetting.loading = false
        this.getMenuAuth()
      }
    },
    cancel () {
      this.modalSetting.show = false
    }
  },
  created () {
    this.getMenuAuth()
    this.getList()
  }
}
</script>
<style>
  /*解决table表格适应问题*/
  .table-min-width {
    min-width: 200px;
    width: 200px;
  }
  .rule-list{
    height:300px;
    border:1px solid #dddee1;
    padding:10px;
    overflow:auto;
  }
</style>
